<template>
  <div class="rating-container">
    <span v-for="star in 5" :key="star" class="star" @click="setStar(star)">
      <!-- <span v-for="star in 5" :key="star" class="star" @click="$emit('update-rating', star)"> -->
      {{ model >= star ? '★' : '☆' }}
    </span>
    <input type="text" v-model="model" />
    <input type="text" v-model="firstName" />
    <input type="text" v-model="lastName" />
  </div>
</template>

<script setup>
  const model = defineModel('rate')


  function setStar(newStar) {
    // 触发父组件的 update-rating 事件
    // emits('update-rating', 100)
    model.value = newStar
  }

  /* 子组件通过命名来指定要获取哪一个v-model绑定值 */
  const firstName = defineModel('firstName', { required: true })
  const lastName = defineModel('lastName')
</script>

<style scoped>
  .rating-container {
    display: flex;
    font-size: 24px;
    cursor: pointer;
  }

  .star {
    margin-right: 5px;
    color: gold;
  }

  .star:hover {
    color: orange;
  }
</style>
